<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <link rel="stylesheet" href="../css/parallax.css">
    <link rel="stylesheet" href="../css/parallax-animation.css"/>
    <style>
        .page{
            width: 581px;
            height: 916px;
        }
        .page1{
            background-color: #bc77fa;
        }
        .page2{
            background-color: #fa9d67;
        }
        .page3{
            background-color: #62ffdb;
        }
        .page4{
            background-color: #ff6fe0;
        }
        .page > span{
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            margin: auto;
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            font-size: 3rem;
            color: #ffffff;
            font-family: "幼圆";
        }
        .box1 {
            width: 100px;
            height: 200px;
            background-color: #ecf0f1;
            position: absolute;
            left: 160px; top: 126px;
        }
        .box2 {
            width: 200px;
            height: 100px;
            background-color: #8e44ad;
            position: absolute;
            left: 60px; top: 226px;
        }
        .box3 {
            width: 100px;
            height: 100px;
            background-color: #34495e;
            position: absolute;
            left: 160px; top: 226px;
        }
        .box4 {
            width: 50px;
            height: 50px;
            background-color: #e74c3c;
            position: absolute;
            left: 185px; top: 250px;
        }
        .m1{
            touch-action: pan-x;
            user-select: none;
            -webkit-user-drag: none;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            display: block
        }
        .SPpage{
            display: none;
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            background: white; z-index: 1999;
            touch-action: pan-y;
            user-select: none;
            -webkit-user-drag: none;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }
        .maka-page-0{
            z-index: 999;
            display: block;
        }
        .page-bg-0{
            position: absolute;
            width: 580.317px;
            height: 914px;
            top: 50%;
            left: 50%;
            margin-left: -290.159px;
            margin-top: -457px;
            overflow: hidden;
            background-color: rgb(250, 250, 250);
        }
        .page-bg-0>img{
            position: absolute;
            width: 581px;
            top: 0;
            left: 0;
            -webkit-user-drag: none;
            user-select: none;
            opacity: 1;
        }
        .maka-eleCanvas-0{
            width: 580px;
            height: 913.5px;
            left: 0px;
            top: 0.25px;
            position: absolute;
        }
        .m2{
            width: 367px;
            height: 499px;
            left: 104px;
            top: 426px;
            position: absolute;
            opacity: 1;
            transform: rotate(0deg);
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <div class="pages">

        <!-- 第一屏 -->
        <div class="page  page1">
                <div class="maka-pages m1" id="maka-pages">
                    <div class="SPpage" style=" ">
                        <iframe border="0" style="border:0;outline:0" width="100%" height="100%"></iframe>
                    </div>
                    <div class="maka-page maka-page-0">
                        <div class="page-bg-0" >
                        <!--背景图-->
                        <img src="../img/877add6685e6eff64faae1f53311cf46.jpg">
                    </div>
                        <div class="maka-eleCanvas maka-eleCanvas-0">
                            <div class="m2">
                                <div class="fadeInUp animated" style="position: absolute; width: 100%; height: 100%; overflow: hidden; border-radius: 0px; box-shadow: black 0px 0px 0px; background-image: url(&quot;http://img2.maka.im/user/443620/images/e366388125a9ee768794d54c654b65fc.png@0-0-405-551a_90Q.src&quot;); background-repeat: no-repeat; background-size: 100% 100%; background-position: 0px 0px; animation: fadeInUp 1000ms ease 4500ms both running;">
                                    <img src="http://img2.maka.im/user/443620/images/e366388125a9ee768794d54c654b65fc.png@0-0-405-551a_90Q.src" style="opacity: 0;">
                                </div>
                            </div>
                            <div style="width: 309px; height: 441px; left: -59px; top: 486px; position: absolute; opacity: 1; transform: rotate(0deg); cursor: pointer;">
                                <div class="fadeInLeft animated" style="position: absolute; width: 100%; height: 100%; overflow: hidden; border-radius: 0px; box-shadow: black 0px 0px 0px; background-image: url(&quot;http://img2.maka.im/user/443620/images/f575a2661e5a5debb7939e9287115223.png@0-0-341-487a_90Q.src&quot;); background-repeat: no-repeat; background-size: 100% 100%; background-position: 0px 0px; animation: fadeInLeft 1000ms ease 4000ms both running;">
                                    <img src="http://img2.maka.im/user/443620/images/f575a2661e5a5debb7939e9287115223.png@0-0-341-487a_90Q.src" style="opacity: 0;">
                                </div>
                            </div>
                            <div style="width: 62px; height: 72px; left: 38px; top: 363px; position: absolute; opacity: 1; transform: rotate(0deg); cursor: pointer;">
                                <div class="fadeInNormal animated" style="position: absolute; width: 100%; height: 100%; overflow: hidden; border-radius: 0px; box-shadow: black 0px 0px 0px; background-image: url(&quot;http://img2.maka.im/user/443620/images/60da86499d4c8d3f4f6803e41c744289.png@0-0-68-79a_90Q.src&quot;); background-repeat: no-repeat; background-size: 100% 100%; background-position: 0px 0px; animation: fadeInNormal 1000ms ease 4000ms both running;">
                                    <img src="http://img2.maka.im/user/443620/images/60da86499d4c8d3f4f6803e41c744289.png@0-0-68-79a_90Q.src" style="opacity: 0;">
                                </div>
                            </div>
                            <div style="width: 61px; height: 66px; left: 469px; top: 449px; position: absolute; opacity: 1; transform: rotate(0deg); cursor: pointer;">
                                <div class="zoomIn animated" style="position: absolute; width: 100%; height: 100%; overflow: hidden; border-radius: 0px; box-shadow: black 0px 0px 0px; background-image: url(&quot;http://img2.maka.im/user/443620/images/fa28176799158ba3e0447ebae111b6a5.png@0-0-67-73a_90Q.src&quot;); background-repeat: no-repeat; background-size: 100% 100%; background-position: 0px 0px; animation: zoomIn 1000ms ease 6000ms both running;">
                                    <img src="http://img2.maka.im/user/443620/images/fa28176799158ba3e0447ebae111b6a5.png@0-0-67-73a_90Q.src" style="opacity: 0;">
                                </div>
                            </div>
                            <div style="width: 34px; height: 38px; left: 165px; top: 521px; position: absolute; opacity: 1; transform: rotate(0deg); cursor: pointer;">
                                <div class="zoomIn animated" style="position: absolute; width: 100%; height: 100%; overflow: hidden; border-radius: 0px; box-shadow: black 0px 0px 0px; background-image: url(&quot;http://img2.maka.im/user/443620/images/5eac981acee3a6ee0c01baee8082032a.png@0-0-38-42a_90Q.src&quot;); background-repeat: no-repeat; background-size: 100% 100%; background-position: 0px 0px; animation: zoomIn 1000ms ease 6500ms both running;">
                                    <img src="http://img2.maka.im/user/443620/images/5eac981acee3a6ee0c01baee8082032a.png@0-0-38-42a_90Q.src" style="opacity: 0;">
                                </div>
                            </div>
                            <div style="width: 441px; height: 92px; left: 69px; top: 175px; position: absolute; opacity: 1; transform: rotate(0deg); cursor: pointer;">
                                <div class="zoomIn animated" style="position: absolute; width: 100%; height: 100%; overflow: hidden; border-radius: 0px; box-shadow: black 0px 0px 0px; background-image: url(&quot;http://img2.maka.im/user/443620/images/558dbd480729428038d3f934a42f1287.png@0-0-487-102a_90Q.src&quot;); background-repeat: no-repeat; background-size: 100% 100%; background-position: 0px 0px; animation: zoomIn 1000ms ease 2000ms both running;">
                                    <img src="http://img2.maka.im/user/443620/images/558dbd480729428038d3f934a42f1287.png@0-0-487-102a_90Q.src" style="opacity: 0;">
                                </div>
                            </div>
                            <div style="width: 204px; height: 100px; left: 299px; top: 278px; position: absolute; opacity: 1; transform: rotate(0deg); cursor: pointer;">
                                <div class="fadeInRight animated" style="position: absolute; width: 100%; height: 100%; overflow: hidden; border-radius: 0px; box-shadow: black 0px 0px 0px; background-image: url(&quot;http://img2.maka.im/user/443620/images/36e66a005d5b689df6982cec66c750c4.png@0-0-225-110a_90Q.src&quot;); background-repeat: no-repeat; background-size: 100% 100%; background-position: 0px 0px; animation: fadeInRight 1000ms ease 3000ms both running;">
                                    <img src="http://img2.maka.im/user/443620/images/36e66a005d5b689df6982cec66c750c4.png@0-0-225-110a_90Q.src" style="opacity: 0;">
                                </div>
                            </div>
                            <div style="width: 434px; height: 48px; left: 72px; top: 111px; position: absolute; opacity: 1; transform: rotate(0deg); cursor: pointer;">
                                <div class="zoomInDown animated" style="position: absolute; width: 100%; height: 100%; overflow: hidden; border-radius: 0px; box-shadow: black 0px 0px 0px; background-image: url(&quot;http://img2.maka.im/user/443620/images/e11f9d7306fbd9c2307c27fd5dbfeb52.png@0-0-479-53a_90Q.src&quot;); background-repeat: no-repeat; background-size: 100% 100%; background-position: 0px 0px; animation: zoomInDown 2000ms ease 1000ms both running;">
                                    <img src="http://img2.maka.im/user/443620/images/e11f9d7306fbd9c2307c27fd5dbfeb52.png@0-0-479-53a_90Q.src" style="opacity: 0;">
                                </div>
                            </div>
                            <div style="width: 217px; height: 69px; left: 73px; top: 284px; position: absolute; opacity: 1; transform: rotate(0deg); cursor: pointer;">
                                <div class="fadeInLeft animated" style="position: absolute; width: 100%; height: 100%; overflow: hidden; border-radius: 0px; box-shadow: black 0px 0px 0px; background-image: url(&quot;http://img2.maka.im/user/443620/images/8b295f7ef4570a959c5bed3f983b692b.png@0-0-239-76a_90Q.src&quot;); background-repeat: no-repeat; background-size: 100% 100%; background-position: 0px 0px; animation: fadeInLeft 1000ms ease 3000ms both running;">
                                    <img src="http://img2.maka.im/user/443620/images/8b295f7ef4570a959c5bed3f983b692b.png@0-0-239-76a_90Q.src" style="opacity: 0;">
                                </div>
                            </div>
                            <div style="width: 155px; height: 37px; left: 327px; top: 295px; position: absolute; opacity: 1; transform: rotate(0deg); cursor: pointer;">
                                <div class="fadeInNormal animated" style="position: absolute; width: 100%; height: 100%; overflow: hidden; border-radius: 0px; box-shadow: black 0px 0px 0px; background-image: url(&quot;http://img2.maka.im/user/443620/images/275b6b9cc28ec78be12bc09397629e49.png@0-0-171-41a_90Q.src&quot;); background-repeat: no-repeat; background-size: 100% 100%; background-position: 0px 0px; animation: fadeInNormal 1000ms ease 3500ms both running;">
                                    <img src="http://img2.maka.im/user/443620/images/275b6b9cc28ec78be12bc09397629e49.png@0-0-171-41a_90Q.src" style="opacity: 0;">
                                </div>
                            </div>
                            <div style="width: 323px; height: 394px; left: 326px; top: 539px; position: absolute; opacity: 1; transform: rotate(0deg); cursor: pointer;"><div class="fadeInRight animated" style="position: absolute; width: 100%; height: 100%; overflow: hidden; border-radius: 0px; box-shadow: black 0px 0px 0px; background-image: url(&quot;http://img2.maka.im/user/443620/images/48aef12cde6e4f118aaf41653ce6a187.png@0-0-356-435a_90Q.src&quot;); background-repeat: no-repeat; background-size: 100% 100%; background-position: 0px 0px; animation: fadeInRight 1000ms ease 5000ms both running;">
                                <img src="http://img2.maka.im/user/443620/images/48aef12cde6e4f118aaf41653ce6a187.png@0-0-356-435a_90Q.src" style="opacity: 0;">
                            </div>
                            </div>
                            <div style="width: 118px; height: 32px; left: 240px; top: 46px; position: absolute; opacity: 1; transform: rotate(0deg); cursor: pointer;">
                                <div class="fadeInNormal animated" style="position: absolute; width: 100%; height: 100%; overflow: hidden; border-radius: 0px; box-shadow: black 0px 0px 0px; background-image: url(&quot;http://img2.maka.im/user/443620/images/eb50407dff4400ae300687992f155279.png@0-0-169-44a_90Q.src&quot;); background-repeat: no-repeat; background-size: 100% 100%; background-position: 0px 0px; animation: fadeInNormal 1000ms ease 600ms both running;">
                                    <img src="http://img2.maka.im/user/443620/images/eb50407dff4400ae300687992f155279.png@0-0-169-44a_90Q.src" style="opacity: 0;">
                                </div>
                            </div>
                            <div style="position: absolute; width: 443px; height: auto; top: 396px; left: 77px; transform: rotate(0deg); transform-origin: center center 0px; opacity: 1;">
                                <div class="fadeInNormal animated" style="width: 100%; height: auto; color: rgb(255, 255, 255); font-size: 25px; text-align: center; font-weight: normal; text-decoration: none; line-height: 1.2; border-style: none; border-color: rgb(0, 0, 0); border-width: 0px; font-style: normal; border-radius: 0px; box-shadow: black 0px 0px 0px; word-wrap: break-word; white-space: pre-wrap; font-family: makahttpfontmakaimxmhtwebfontse1fae83a98d2d56b4f2447d453393e2317jUBw5ia7dd63b265e14dc0192fb47ffc0626cbttf; animation: fadeInNormal 1000ms ease 4000ms both running;">我们无论做什么事情，
                    都要站在党和人民的立场上。
                </div>
                </div>
                </div>
                </div>
                    <img src="" style="width: 54px; height: 54px; right: 27px; top: 27px; opacity: 1; position: absolute; display: block; z-index: 1000; touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
                    <div class="maka-page maka-page-1" style="z-index: 998; display: block;"><div class="page-bg-1" style="position: absolute; width: 580.317px; height: 914px; top: 50%; left: 50%; margin-left: -290.159px; margin-top: -457px; overflow: hidden; background-color: rgb(250, 250, 250);">
                        <img src="http://img2.maka.im/user/443620/images/877add6685e6eff64faae1f53311cf46.jpg@80Q.src" style="position: absolute; width: 581px; top: 0px; left: 0px; -webkit-user-drag: none; user-select: none; opacity: 1;">
                    </div>
                        <div class="maka-eleCanvas maka-eleCanvas-1" style="width: 580px; height: 913.5px; left: 0px; top: 0.25px; position: absolute;"><div style="width: 559px; height: 799px; left: 1px; top: 99px; position: absolute; opacity: 1; transform: rotate(0deg); cursor: pointer;">
                            <div class="fadeInNormal animated" style="position: absolute; width: 100%; height: 100%; overflow: hidden; border-radius: 0px; box-shadow: black 0px 0px 0px; background-image: url(&quot;http://img2.maka.im/user/443620/images/3c1b56d35dba27a59ce835ad774707f9.png@0-0-617-882a_90Q.src&quot;); background-repeat: no-repeat; background-size: 100% 100%; background-position: 0px 0px; animation: fadeInNormal 2000ms ease 1000ms both paused; display: none;">
                                <img src="http://img2.maka.im/user/443620/images/3c1b56d35dba27a59ce835ad774707f9.png@0-0-617-882a_90Q.src" style="opacity: 0;">
                            </div>
                        </div>
                            <div style="width: 399px; height: 21px; left: 92px; top: 216px; position: absolute; opacity: 1; transform: rotate(0deg); cursor: pointer;">
                                <div class="fadeInNormal animated" style="position: absolute; width: 100%; height: 100%; overflow: hidden; border-radius: 0px; box-shadow: black 0px 0px 0px; background-image: url(&quot;http://img2.maka.im/user/443620/images/93aa540a85aaacb264f38bd53761496b.png@0-0-440-23a_90Q.src&quot;); background-repeat: no-repeat; background-size: 100% 100%; background-position: 0px 0px; animation: fadeInNormal 1000ms ease 2500ms both paused; display: none;">
                            <img src="http://img2.maka.im/user/443620/images/93aa540a85aaacb264f38bd53761496b.png@0-0-440-23a_90Q.src" style="opacity: 0;">
                                </div>
                            </div>
                            <div style="width: 403px; height: 297px; left: 93px; top: 283px; position: absolute; opacity: 1; transform: rotate(0deg); cursor: pointer;">
                                <div class="expandOpen animated" style="position: absolute; width: 100%; height: 100%; overflow: hidden; border-radius: 0px; box-shadow: black 0px 0px 0px; background-image: url(&quot;http://img2.maka.im/user/443620/images/2023b33d12f8a0a65ee32576d09924ed.png@0-0-445-328a_90Q.src&quot;); background-repeat: no-repeat; background-size: 100% 100%; background-position: 0px 0px; animation: expandOpen 1000ms ease 4000ms both paused; display: none;">
                                    <img src="http://img2.maka.im/user/443620/images/2023b33d12f8a0a65ee32576d09924ed.png@0-0-445-328a_90Q.src" style="opacity: 0;">
                                </div>
                            </div>
                            <div style="width: 411px; height: 226px; left: 96px; top: 597px; position: absolute; opacity: 1; transform: rotate(0deg); cursor: pointer;"><div class="fadeInNormal animated" style="position: absolute; width: 100%; height: 100%; overflow: hidden; border-radius: 0px; box-shadow: black 0px 0px 0px; background-image: url(&quot;http://img2.maka.im/user/443620/images/d87d87c4f8faf803d3c72a316030b801.png@0-0-453-249a_90Q.src&quot;); background-repeat: no-repeat; background-size: 100% 100%; background-position: 0px 0px; animation: fadeInNormal 1000ms ease 5500ms both paused; display: none;">
                                <img src="http://img2.maka.im/user/443620/images/d87d87c4f8faf803d3c72a316030b801.png@0-0-453-249a_90Q.src" style="opacity: 0;">
                            </div>
                            </div>
                            <div style="width: 390px; height: 44px; left: 96px; top: 48px; position: absolute; opacity: 0.501961; transform: rotate(0deg); cursor: pointer;">
                                <div class="zoomIn animated" style="position: absolute; width: 100%; height: 100%; overflow: hidden; border-radius: 0px; box-shadow: black 0px 0px 0px; background-image: url(&quot;http://img2.maka.im/user/443620/images/f6def3d8b519b741ba7dafe3b9e6b018.png@0-0-430-48a_90Q.src&quot;); background-repeat: no-repeat; background-size: 100% 100%; background-position: 0px 0px; animation: zoomIn 1000ms ease 600ms both paused; display: none;">
                                    <img src="http://img2.maka.im/user/443620/images/f6def3d8b519b741ba7dafe3b9e6b018.png@0-0-430-48a_90Q.src" style="opacity: 0;">
                                </div>
                            </div>
                            <div style="width: 62px; height: 72px; left: 107px; top: 353px; position: absolute; opacity: 1; transform: rotate(0deg); cursor: pointer;">
                                <div class="zoomIn animated" style="position: absolute; width: 100%; height: 100%; overflow: hidden; border-radius: 0px; box-shadow: black 0px 0px 0px; background-image: url(&quot;http://img2.maka.im/user/443620/images/eae0f7b48d8a0f57527fdddf56db0e77.png@0-0-68-79a_90Q.src&quot;); background-repeat: no-repeat; background-size: 100% 100%; background-position: 0px 0px; animation: zoomIn 1000ms ease 4500ms both paused; display: none;">
                                    <img src="http://img2.maka.im/user/443620/images/eae0f7b48d8a0f57527fdddf56db0e77.png@0-0-68-79a_90Q.src" style="opacity: 0;">
                                </div>
                            </div>
                            <div style="width: 45px; height: 49px; left: 432px; top: 474px; position: absolute; opacity: 1; transform: rotate(0deg); cursor: pointer;">
                                <div class="zoomIn animated" style="position: absolute; width: 100%; height: 100%; overflow: hidden; border-radius: 0px; box-shadow: black 0px 0px 0px; background-image: url(&quot;http://img2.maka.im/user/443620/images/9f2c7e3704214c48cbd46811651d5d2e.png@0-0-50-54a_90Q.src&quot;); background-repeat: no-repeat; background-size: 100% 100%; background-position: 0px 0px; animation: zoomIn 1000ms ease 5000ms both paused; display: none;">
                                    <img src="http://img2.maka.im/user/443620/images/9f2c7e3704214c48cbd46811651d5d2e.png@0-0-50-54a_90Q.src" style="opacity: 0;">
                                </div>
                            </div>
                            <div style="position: absolute; width: 476px; height: auto; top: 150px; left: 44px; transform: rotate(358deg); transform-origin: center center 0px; opacity: 1;">
                                <div class="zoomIn animated" style="width: 100%; height: auto; color: rgb(0, 0, 0); font-size: 54px; text-align: center; font-weight: normal; text-decoration: none; line-height: 1.2; border-style: none; border-color: rgb(0, 0, 0); border-width: 0px; font-style: normal; border-radius: 0px; box-shadow: black 0px 0px 0px; word-wrap: break-word; white-space: pre-wrap; font-family: makahttpfontmakaimxmhtwebfontse1fae83a98d2d56b4f2447d453393e2317jUBw5i916e9301a5290e779e6d21d4f5d9bb30ttf; animation: zoomIn 1000ms ease 2000ms both paused; display: none;">人民的视觉设计师
                                </div>
                            </div>
                            <div style="position: absolute; width: 476px; height: auto; top: 240px; left: 58px; transform: rotate(358deg); transform-origin: center center 0px; opacity: 1;">
                                <div class="fadeInNormal animated" style="width: 100%; height: auto; color: rgb(0, 0, 0); font-size: 27px; text-align: center; font-weight: bold; text-decoration: none; line-height: 1.2; border-style: none; border-color: rgb(0, 0, 0); border-width: 0px; font-style: normal; border-radius: 0px; box-shadow: black 0px 0px 0px; word-wrap: break-word; white-space: pre-wrap; font-family: makahttpfontmakaimxmhtwebfontse1fae83a98d2d56b4f2447d453393e2317jUBw5i8867f601332b8717d762cdd9a3046e12ttf; animation: fadeInNormal 1000ms ease 3000ms both paused; display: none;">ARCHIVE OF THE PEOPLE
                            </div>
                            </div>
                            <div style="position: absolute; width: 81px; height: auto; top: 624px; left: 107px; transform: rotate(358deg); transform-origin: center center 0px; opacity: 1;">
                                <div class="fadeInLeft animated" style="width: 100%; height: auto; color: rgb(0, 0, 0); font-size: 22px; text-align: center; font-weight: normal; text-decoration: none; line-height: 1.2; border-style: none; border-color: rgb(0, 0, 0); border-width: 0px; font-style: normal; border-radius: 0px; box-shadow: black 0px 0px 0px; word-wrap: break-word; white-space: pre-wrap; font-family: makahttpfontmakaimxmhtwebfontse1fae83a98d2d56b4f2447d453393e2317jUBw5i98d7b500edd8ab51ea361ac1ff26c21attf; animation: fadeInLeft 1000ms ease 6000ms both paused; display: none;">职责
                            </div>
                            </div>
                            <div style="position: absolute; width: 81px; height: auto; top: 730px; left: 108px; transform: rotate(358deg); transform-origin: center center 0px; opacity: 1;">
                                <div class="fadeInLeft animated" style="width: 100%; height: auto; color: rgb(0, 0, 0); font-size: 22px; text-align: center; font-weight: normal; text-decoration: none; line-height: 1.2; border-style: none; border-color: rgb(0, 0, 0); border-width: 0px; font-style: normal; border-radius: 0px; box-shadow: black 0px 0px 0px; word-wrap: break-word; white-space: pre-wrap; font-family: makahttpfontmakaimxmhtwebfontse1fae83a98d2d56b4f2447d453393e2317jUBw5i2f802f15d1f9031cca01ed566b04e763ttf; animation: fadeInLeft 1000ms ease 6000ms both paused; display: none;">要求
                                </div>
                            </div>
                            <div style="position: absolute; width: 338px; height: auto; top: 614px; left: 207px; transform: rotate(358deg); transform-origin: center center 0px; opacity: 1;">
                                <div class="fadeInLeft animated" style="width: 100%; height: auto; color: rgb(0, 0, 0); font-size: 22px; text-align: left; font-weight: normal; text-decoration: none; line-height: 1.2; border-style: none; border-color: rgb(0, 0, 0); border-width: 0px; font-style: normal; border-radius: 0px; box-shadow: black 0px 0px 0px; word-wrap: break-word; white-space: pre-wrap; font-family: makahttpfontmakaimxmhtwebfontse1fae83a98d2d56b4f2447d453393e2317jUBw5icb63ccd4e3457a52c690e04329c1bc39ttf; animation: fadeInLeft 1000ms ease 6500ms both paused; display: none;">负责公司运营活动视觉设计
                            </div>
                            </div>
                            <div style="position: absolute; width: 295px; height: auto; top: 654px; left: 204px; transform: rotate(358deg); transform-origin: center center 0px; opacity: 1;">
                                <div class="fadeInLeft animated" style="width: 100%; height: auto; color: rgb(0, 0, 0); font-size: 22px; text-align: left; font-weight: normal; text-decoration: none; line-height: 1.2; border-style: none; border-color: rgb(0, 0, 0); border-width: 0px; font-style: normal; border-radius: 0px; box-shadow: black 0px 0px 0px; word-wrap: break-word; white-space: pre-wrap; font-family: makahttpfontmakaimxmhtwebfontse1fae83a98d2d56b4f2447d453393e2317jUBw5i3ece4dc80845299f86c91315afb1da84ttf; animation: fadeInLeft 1000ms ease 7000ms both paused; display: none;">主导设定产品的整体视觉风格，推动提高团队的设计能力
                                </div>
                            </div>
                            <div style="position: absolute; width: 338px; height: auto; top: 720px; left: 207px; transform: rotate(358deg); transform-origin: center center 0px; opacity: 1;">
                                <div class="fadeInLeft animated" style="width: 100%; height: auto; color: rgb(0, 0, 0); font-size: 22px; text-align: left; font-weight: normal; text-decoration: none; line-height: 1.2; border-style: none; border-color: rgb(0, 0, 0); border-width: 0px; font-style: normal; border-radius: 0px; box-shadow: black 0px 0px 0px; word-wrap: break-word; white-space: pre-wrap; font-family: makahttpfontmakaimxmhtwebfontse1fae83a98d2d56b4f2447d453393e2317jUBw5i944d4047ba157e02d6a6684caa111bf3ttf; animation: fadeInLeft 1000ms ease 7500ms both paused; display: none;">两年以上经验，懂xxx优先
                                </div>
                            </div>
                            <div style="position: absolute; width: 287px; height: auto; top: 761px; left: 209px; transform: rotate(358deg); transform-origin: center center 0px; opacity: 1;">
                                <div class="fadeInLeft animated" style="width: 100%; height: auto; color: rgb(0, 0, 0); font-size: 22px; text-align: left; font-weight: normal; text-decoration: none; line-height: 1.2; border-style: none; border-color: rgb(0, 0, 0); border-width: 0px; font-style: normal; border-radius: 0px; box-shadow: black 0px 0px 0px; word-wrap: break-word; white-space: pre-wrap; font-family: makahttpfontmakaimxmhtwebfontse1fae83a98d2d56b4f2447d453393e2317jUBw5i3c21c1ab86f067c98a972dd40b47ac70ttf; animation: fadeInLeft 1000ms ease 8000ms both paused; display: none;">良好的沟通能力，善于对设计的表达，具有良好的团队精神
                </div>
                </div>
                </div>
                </div>
                </div>
            </div>

        <!-- 第二屏 -->
        <div class="page  page2">
            <div class="box1" data-animation="followSlide" data-duration="1000"></div>
            <div class="box2" data-animation="followSlide" data-delay="200" data-duration="1000"></div>
            <div class="box3" data-animation="followSlide" data-delay="400" data-duration="1000"></div>
            <div class="box4" data-animation="followSlide" data-delay="600" data-duration="1000"></div>
        </div>

        <!-- 第三屏 -->
        <div class="page  page3">
            <div class="box1" data-animation="fadeInToBottom"></div>
            <div class="box2" data-animation="fadeInToTop" data-delay="200"></div>
            <div class="box3" data-animation="fadeInToLeft" data-delay="400"></div>
            <div class="box4" data-animation="fadeInToRight" data-delay="600"></div>
        </div>
        <!-- 第四屏 -->
        <div class="page  page4">
            <div class="box1" data-animation="fadeIn"></div>
            <div class="box2" data-animation="fadeOut" data-delay="800"></div>
        </div>
        <!-- 第五屏 -->
        <div class="page  page4">
            <div class="box1" data-animation="fadeIn"></div>
            <div class="box2" data-animation="fadeOut" data-delay="800"></div>
        </div>
        <!-- 第六屏 -->
        <div class="page  page4">
            <div class="box1" data-animation="fadeIn"></div>
            <div class="box2" data-animation="fadeOut" data-delay="800"></div>
        </div>
        <!-- 第七屏 -->
        <div class="page  page4">
            <div class="box1" data-animation="fadeIn"></div>
            <div class="box2" data-animation="fadeOut" data-delay="800"></div>
        </div>
        <!-- 第八屏 -->
        <div class="page  page4">
            <div class="box1" data-animation="fadeIn"></div>
            <div class="box2" data-animation="fadeOut" data-delay="800"></div>
        </div>
        <!-- 第九屏 -->
        <div class="page  page4">
            <div class="box1" data-animation="fadeIn"></div>
            <div class="box2" data-animation="fadeOut" data-delay="800"></div>
        </div>
        <!-- 第十屏 -->
        <div class="page  page4">
            <div class="box1" data-animation="fadeIn"></div>
            <div class="box2" data-animation="fadeOut" data-delay="800"></div>
        </div>

    </div>
</div>




<script  src="../lib/zepto.min.v1.1.6.js"></script>
<script  src="../js/parallax.js"></script>
<script>
    $('.pages').parallax({
//        direction:"horizontal",
        swipeAnim:"cover",
        drag:      true,
        indicator: true,
        arrow: true,
        onchange: function(index, element, direction) {
            console.log("当前的页面"+index);
            console.log(element);
            console.log(direction);
        },
        orientationchange: function(orientation) {
        }
    });

</script>
</body>
</html>